<script lang="tsx">
import { Component, Vue } from 'vue-property-decorator'
import SlotChild from './components/slot-child.vue'
import ScopedSlotChild from './components/scoped-slot-child.vue'

@Component({
  name: 'SlotTest',
})
export default class extends Vue {
  render() {
    return (
      <div class='app-container'>
        <h3>slot 插槽：</h3>
        <SlotChild>
          <span>slot 子组件 默认插槽</span>

          <template slot='name'>
            slot 子组件 具名插槽
          </template>
        </SlotChild>

        <h3>scoped-slot 作用域插槽：</h3>
        <ScopedSlotChild {...{
          scopedSlots: {
            default: (props: any) => (
              <span>scoped-slot 子组件 默认插槽 {props}</span>
            ),
            name: (props: any) => (
              <span>scoped-slot 子组件 具名插槽 {props}</span>
            ),
          },
        }} />
      </div>
    )
  }
}
</script>

<style>

</style>
